<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗黑模式风格标签页</title>
    <style>
        /* 基础样式 - 暗黑主题 */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            box-sizing: border-box;
        }
        /* 主容器 - 响应式宽度 */
        .tab-container {
            width: 95%; /* 默认占用95%宽度 */
            max-width: 1200px; /* 最大宽度限制 */
            margin: 30px auto;
            background: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        /* 标签按钮容器 - 响应式布局 */
        .tab-buttons {
            display: flex;
            background: #2d2d2d;
            border-bottom: 1px solid #333;
            flex-wrap: wrap; /* 允许换行 */
        }
        /* 标签按钮 - 响应式调整 */
        .tab-button {
            flex: 1 0 auto; /* 灵活伸缩 */
            min-width: 120px; /* 最小宽度 */
            padding: 16px 10px;
            text-align: center;
            color: #aaa;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s;
            position: relative;
        }
        .tab-button:hover {
            color: #ddd;
            background: #252525;
        }
        .tab-button.active {
            color: #fff;
            background: #1e1e1e;
        }
        .tab-button.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #bb86fc;
        }
        /* 内容区域 - 响应式内边距 */
        .tab-content {
            display: none;
            padding: 25px;
            line-height: 1.6;
            box-sizing: border-box;
        }
        .tab-content.active {
            display: block;
        }
        /* 标题样式 */
        h2 {
            color: #fff;
            margin-top: 0;
            font-size: clamp(1.5rem, 3vw, 2rem); /* 响应式字体大小 */
        }
        /* 链接样式 */
        a {
            color: #bb86fc;
            text-decoration: none;
        }
        /* 统计区块 - 响应式布局 */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        /* 图表占位符 */
        .chart-placeholder {
            height: 200px;
            background: #252525;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 20px 0;
            width: 100%;
        }
        /* 表单元素 */
        select, input[type="checkbox"] {
            background: #252525;
            color: #fff;
            border: 1px solid #333;
            padding: 8px;
            border-radius: 4px;
            width: 100%;
            max-width: 300px;
        }
        label {
            display: block;
            margin: 15px 0 8px;
        }
        /* 响应式断点 */
        @media (max-width: 768px) {
            .tab-container {
                width: 98%; /* 在小屏幕上占用更多空间 */
                margin: 15px auto;
            }
            .tab-button {
                min-width: 100px; /* 减小最小宽度 */
                padding: 12px 5px;
                font-size: 14px;
            }
            .tab-content {
                padding: 15px;
            }
            .stats {
                grid-template-columns: 1fr; /* 单列布局 */
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            .tab-button {
                flex: 1 0 50%; /* 每行显示2个按钮 */
                min-width: auto;
            }
            select, input[type="checkbox"] {
                max-width: 100%; /* 表单元素全宽 */
            }
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tab-buttons" id="tabButtons">
            {% for tab in tabs %}
                <button class="tab-button {% if forloop.first %}active{% endif %}" 
                        onclick="openTab(event, '{{ tab.id }}')">
                    {{ tab.title }}
                </button>
            {% endfor %}
        </div>
        
        <div class="tab-content-container" id="tabContentContainer">
            {% for tab in tabs %}
                <div id="{{ tab.id }}" class="tab-content {% if forloop.first %}active{% endif %}">
                    {{ tab.content|safe }}
                </div>
            {% endfor %}
        </div>
    </div>

    <script>
        function openTab(evt, tabId) {
            const tabContents = document.querySelectorAll(".tab-content");
            tabContents.forEach(content => content.classList.remove("active"));
            
            const tabButtons = document.querySelectorAll(".tab-button");
            tabButtons.forEach(button => button.classList.remove("active"));
            
            document.getElementById(tabId).classList.add("active");
            evt.currentTarget.classList.add("active");
        }
    </script>
</body>
</html>
